<style scoped lang="scss">
.bigBox {
  width: 100vw;
  height: 100vh;
  background-image: url(../../assets/login_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem; // 0.5rem * 0.5
  }
  main {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .box {
      width: 275px; // 7.5rem * 0.5
      height: 156px; // 3.4rem * 0.5
      margin-top: 100px; // 200px * 0.5
      border-radius: 3px; // 6px * 0.5
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      position: relative;

      .box-top {
        width: 86%;
        height: 30px; // 60px * 0.5
        border-bottom: 1px solid #ccc; // 1px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          flex: 1;
          height: 80%;
          border: none;
          margin-left: 5px; // 10px * 0.5
          margin-top: 0.05rem; // 0.1rem * 0.5
        }
        input::placeholder {
          color: #b0acac;
        }
        button {
          // width: 1rem; // 2rem * 0.5
          // height: 0.25rem; // 0.5rem * 0.5
          padding: 5px 6px; // 10px和12px分别减半
          background-color: #3087ea;
          border: none;
          border-radius: 3px; // 6px * 0.5
          color: #fff;
          font-size: 10px; // 20px * 0.5
        }
      }
      .box-bot {
        width: 86%;
        height: 30px; // 60px * 0.5
        margin-bottom: 0.4rem; // 0.4rem * 0.5
        border-bottom: 1px solid #ccc; // 1px * 0.5
        display: flex;
        align-items: center;

        input {
          width: 100%;
          height: 80%;
          border: none;
        }
        input::placeholder {
          font-size: 11px;
          color: #b0acac;
        }
      }
    }
    .button {
      width: 100%;
      height: 50px; // 100px * 0.5
      margin-bottom: 50px; // 100px * 0.5
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 76%;
        height: 35px; // 70px * 0.5
        border: none;
        color: #3087ea;
        font-size: 13px; // 26px * 0.5
        border-radius: 3px; // 6px * 0.5
        background-color: #fff;
      }
    }
  }
  footer {
    width: 100%;
    height: 50px; // 100px * 0.5
  }
}
.yes {
  color: #fff;
  margin-top: 0.1rem; // 0.1rem * 0.5
  font-size: 0.6rem; // 0.6rem * 0.5
  font-weight: 500;
}
.zuo {
  margin-left: 0.4rem; // 0.8rem * 0.5
}
.qqq {
  margin-right: 0.5rem; // 1rem * 0.5
}
.dadada {
  font-size: 0.4rem; // 0.4rem * 0.5
  font-weight: 400;
}
.yzm {
  padding-left: 6px; // 12px * 0.5
  font-size: 0.3rem; // 0.3rem * 0.5
}
.ccc {
  font-size: 11px; // 22px * 0.5
}
.box1 {
  width: 250px; // 7rem * 0.5
  height: 10px; // 1rem * 0.5
  border-bottom-left-radius: 4px; // 8px * 0.5
  border-bottom-right-radius: 4px; // 8px * 0.5
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: -5%; // -5% * 0.5
  z-index: 1;
}
.box2 {
  width: 6rem; // 6rem * 0.5
  height: 0.4rem; // 0.4rem * 0.5
  border-bottom-left-radius: 4px; // 8px * 0.5
  border-bottom-right-radius: 4px; // 8px * 0.5
  background-color: rgba(255, 255, 255, 0.4);
  position: absolute;
  bottom: -9%; // -9% * 0.5
}
.jiao {
  font-weight: 600;
  color: rgb(120, 176, 241);
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="zuo">
        <el-icon class="yes" @click="onClickLeft"><Back /></el-icon>
      </div>
      <div class="qqq"><p style="color: aliceblue" class="dadada">忘记密码</p></div>
      <div style="padding-right: 20px"></div>
    </header>
    <main>
      <div class="box">
        <div class="box-top">
          <input v-model="values.email" type="text" placeholder="请输入邮箱账号" class="ccc" />
          <button class="gao" @click="getCode">{{ codeMsg }}</button>
        </div>
        <div class="box-bot">
          <input v-model="values.code" type="text" placeholder="请输入验证码" class="yzm" />
        </div>
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
      <div class="button">
        <button @click="next" class="jiao">下一步</button>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { request } from '../../axios/request'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { showNotify } from 'vant'
const router = useRouter()

// 表单数据
const values = ref({
  email: '',
  code: '',
})

// 忘记密码1
const codeMsg = ref('获取验证码')
let disabled = ref(false)
const getCode = async () => {
  if (values.value.email === '') {
    ElMessage({
          message: '邮箱不能为空',
          type: 'error',
        })
    return
  }
  // 发送请求获取验证码
  await request
    .post(
      'health/user/v1/sendOutEmailCode',
      {
        email: values.value.email,
      },
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    .then((res) => {
      let { status, message } = res.data
      if (status === '0000') {
        ElMessage({
          message,
          type: 'success',
        })
        let timer = ref(6)
        disabled.value = true
        let time = setInterval(() => {
          timer.value--
          codeMsg.value = `${timer.value}秒后重新获取`
          if (timer.value === 0) {
            clearInterval(time)
            timer.value = 6
            disabled.value = false
            codeMsg.value = '获取验证码'
          }
        }, 1000)
      } else {
        ElMessage({
          message,
          type: 'error',
        })
      }
    })
}

const onClickLeft = () => history.back()
const next = () => {
  if (values.value.code === '') {
    ElMessage({
          message: '验证码不能为空',
          type: 'error',
        })
    return
  } else if (values.value.email === '') {
    ElMessage({
          message: '邮箱不能为空',
          type: 'error',
        })
    return
  }
  router.push('/passwordtwo?email=' + values.value.email)
}
</script>
